<template>
  <!-- 下方导航栏 -->
  <div class="footer">
    <router-link to="/home" class="footerbox">
      <div class="footer-item home">
        <p>首页</p>
      </div>
    </router-link>
    <router-link to="/category" class="footerbox">
      <div class="footer-item category">
        <p>分类</p>
      </div>
    </router-link>
    <router-link to="/cart" class="footerbox">
      <div class="footer-item cart">
        <p>购物车</p>
      </div>
    </router-link>
    <router-link to="/user" class="footerbox">
      <div class="footer-item user">
        <p>我的</p>
      </div>
    </router-link>
  </div>
</template>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 55px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 6px 0;
  
}
/* .footer .footerbox{
  margin: 10px 10px 10px 10px ;
  padding: -10px -10px -10px -10px;
} */

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:  3px 10px 3px 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.home {
  background-image: url('../assets/tabBar/home.png');
  width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.category {
  background-image: url('../assets/tabBar/category.png');
  width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.cart {
  background-image: url('../assets/tabBar/cart.png');
  width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.user {
  background-image: url('../assets/tabBar/user.png');
  width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.footer-item p {
  position: relative;
  left: -12px;
  top: 30px;
  margin: 0 auto;
  width: 50px;
  justify-content: center;
  align-items: flex-start;
}

a {
  text-decoration: none;
  font-weight: bold;
  font-family: 'MyFont', sans-serif;
  font-size: 16px;
  color: #333;
}

.router-link-exact-active .footer-item.home,
.router-link-active .footer-item.home {
  /* 修改选中后的图片 */
  background-image: url('../assets/tabBar/home-on.png');
}

.router-link-exact-active .footer-item.category,
.router-link-active .footer-item.category{
  /* 修改选中后的图片 */
  background-image: url('../assets/tabBar/category-on.png');
}
.router-link-exact-active .footer-item.cart,
.router-link-active .footer-item.cart {
  /* 修改选中后的图片 */
  background-image: url('../assets/tabBar/cart-on.png');
}
.router-link-exact-active .footer-item.user,
.router-link-active .footer-item.user {
  /* 修改选中后的图片 */
  background-image: url('../assets/tabBar/user-on.png');
}

.router-link-exact-active .footer-item p,
.router-link-active .footer-item p {
  /* 修改选中后的字体颜色 */
  color: #c71e1e;
}
</style>